<script setup>
   import {Plus, Message, FirstAidKit} from '@element-plus/icons-vue'
   import {ref, reactive} from 'vue'
   import Add from "@/pages/chat/add.vue";
   const input = reactive('')
   const dialogVisible = ref(false)
</script>

<template>
  <el-container style="height: 100%">
    <el-aside width="300px" style="border: 1px solid #eee; border-right: none">
      <div style="margin-top: 30px; text-align: center">
        <el-button type="primary" style="width: 80%" @click="dialogVisible=true">新建助理</el-button>
      </div>
      <el-divider></el-divider>
      <ul class="chat-list">
        <li class="chat-list-item">
          <div>
            <img width="50px" src="../../assets/user.png" alt="">
          </div>
          <div>
            <h4>机器狗</h4>
            <p>机器狗是什么？</p>
          </div>
        </li>
      </ul>
    </el-aside>
    <el-aside width="300px"  style="border: 1px solid #eee; border-right: none">
      <div style="margin-top: 30px; display: flex; justify-content: space-between; padding: 0 4px">
        <div style="font-size: 14px;">聊天 <span>0</span></div>
        <el-button type="primary" :icon="Plus" circle ></el-button>
      </div>
      <el-divider></el-divider>
      <ul class="chat-list">
        <li class="sub-chat-item">
            机器狗是什么？
        </li>
      </ul>
    </el-aside>
    <el-main style="border: 1px solid #eee">
      <div class="chat-content">
        <div class="left">
          <div class="logo">
            <svg width="42" height="42" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M0 20C0 8.954 8.954 0 20 0s20 8.954 20 20-8.954 20-20 20S0 31.046 0 20Z" fill="#DCCCBD"></path><path d="M0 20C0 8.954 8.954 0 20 0s20 8.954 20 20-8.954 20-20 20S0 31.046 0 20Z" fill="url(#assistant_svg__a)"></path><path d="M20 39.625C9.161 39.625.375 30.839.375 20S9.161.375 20 .375 39.625 9.161 39.625 20 30.839 39.625 20 39.625Z" stroke="#000" stroke-opacity="0.08" stroke-width="0.75"></path><path d="M29.25 35a5.75 5.75 0 1 0 11.5 0 5.75 5.75 0 0 0-11.5 0Z" fill="#17B26A"></path><path d="M29.25 35a5.75 5.75 0 1 0 11.5 0 5.75 5.75 0 0 0-11.5 0Z" stroke="#fff" stroke-width="1.5"></path><defs><pattern id="assistant_svg__a" patternContentUnits="objectBoundingBox" width="1" height="1"><use xlink:href="#assistant_svg__b" transform="matrix(.00274 0 0 .00274 -.158 0)"></use></pattern><image id="assistant_svg__b" width="480" height="365" xlink:href=""></image></defs></svg>
          </div>
          <div class="info">
            你好！ 我是你的助理，有什么可以帮到你的吗？
          </div>
        </div>
        <div class="right">
          <div class="info">
            好的，我现在需要回答用户的问题：“聊天用英文怎么说”。首先，我要理解这个问题的意思。用户想知道“聊天”这个词在英语中对应的表达是什么。
            接下来，我查看知识库中的内容。知识库里有一个PDF文档关于产教融合项目的流程，里面提到了一些表格和术语，比如合同送审单、报价信息等。这些内容主要涉及项目管理和销售流程，并没有提到任何与“聊天”相关的词汇或翻译信息。

            因此，在知识库中并没有找到与用户问题相关的内容。根据指示，当所有知识库内容都与问题无关时，我需要在回答中包含“知识库中未找到您要的答案！”这句话。

            总结一下，虽然我知道“聊天”的英文是“chat”，但因为知识库里没有相关信息支持这一点，所以不能直接给出这个答案。因此，我的回应只能说明无法从知识库中找到所需的信息。

            根据您的问题，“聊天用英文怎么说”，在知识库中未找到您要的答案！
          </div>
          <div class="logo">
            <svg width="42" height="42" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M0 20C0 8.954 8.954 0 20 0s20 8.954 20 20-8.954 20-20 20S0 31.046 0 20Z" fill="#DCCCBD"></path><path d="M0 20C0 8.954 8.954 0 20 0s20 8.954 20 20-8.954 20-20 20S0 31.046 0 20Z" fill="url(#assistant_svg__a)"></path><path d="M20 39.625C9.161 39.625.375 30.839.375 20S9.161.375 20 .375 39.625 9.161 39.625 20 30.839 39.625 20 39.625Z" stroke="#000" stroke-opacity="0.08" stroke-width="0.75"></path><path d="M29.25 35a5.75 5.75 0 1 0 11.5 0 5.75 5.75 0 0 0-11.5 0Z" fill="#17B26A"></path><path d="M29.25 35a5.75 5.75 0 1 0 11.5 0 5.75 5.75 0 0 0-11.5 0Z" stroke="#fff" stroke-width="1.5"></path><defs><pattern id="assistant_svg__a" patternContentUnits="objectBoundingBox" width="1" height="1"><use xlink:href="#assistant_svg__b" transform="matrix(.00274 0 0 .00274 -.158 0)"></use></pattern><image id="assistant_svg__b" width="480" height="365" xlink:href=""></image></defs></svg>
          </div>
        </div>
      </div>
      <div class="chat-input">
        <el-input
            v-model="input"
            style="width: 100%;"
            :rows="5"
            type="textarea"
            placeholder="请输入..."
        />
        <div style="border: 1px solid #dcdfe6;border-top: none; text-align: right; padding: 10px">
          <el-button :icon="FirstAidKit" />
          <el-button :icon="Message" type="primary" />
        </div>
      </div>
    </el-main>
    <Add v-model="dialogVisible"></Add>
  </el-container>
</template>

<style scoped>
  .chat-list {
    width: 90%;
    margin: auto;
  }
  .chat-list .chat-list-item {
    text-align: left;
    height: 60px;
    background: #eee;
    border-radius: 4px;
    display: flex;
    padding: 10px 0px;
  }

  .chat-list .sub-chat-item {
    text-align: left;
    background: #eee;
    border-radius: 4px;
    padding: 10px 0px;
    list-style: none;
  }

  .chat-list .chat-list-item div:first-child {
    width: 50px;
    height: 50px;
    margin-right: 10px;
    margin-top: 10px;
  }

  .chat-list .chat-list-item div:first-child img {
    display: block;
    border-radius: 50%;
  }
  .chat-list .chat-list-item div:last-child {
    margin-top: 10px;
  }

  .chat-list .chat-list-item div:last-child p {
    font-size: 14px;
  }

  .chat-content {
    height: calc(100% - 200px);

  }

  .chat-input {
    width: 100%;
  }

  .chat-content .right, .chat-content .left {
    display: flex;
    margin-top: 10px;
  }

  .chat-content .left .info,.chat-content .right .info {
    padding: 6px 10px;
    border-radius: 8px;
    background-color: rgb(230, 244, 255);
    word-break: break-word;
    width: 60%;
    margin-left: 30px;
  }

  .chat-content .right .info {
    margin-right: 30px;
  }

  .chat-content .right  {
    justify-content: end;
  }


</style>